<template>
	<div class="h-full w-full ">
		<n-space class="pt-4 pl-4">
			<n-button @click="handleQuery" v-bind:loading="loading" type="success">搜索</n-button>
			<n-button @click="handleAddGroup" v-bind:loading="loading" type="primary">新增</n-button>
		</n-space>
		<loading-empty-wrapper class="flex-col flex-1" :loading="loading" :empty="empty">
			<n-space justify="start">
				<n-card class="card-item" v-for="item in list" v-bind:key="item.id" :title="item.name"
					@click="() => handleEditGroup(item.id!)" header-style="padding-bottom: .3rem;">
					<div class="text-gray-400 text-sm mb-2">
						{{ item.remark }}
					</div>
					<n-space>
						<n-tag type="info" class="card-item-tag" v-for="it,index in item.items" @click.stop="() => handleEditGroup(item.id!,index)">{{ it?.name }}</n-tag>
					</n-space>
					<n-popconfirm @positive-click="() => handlePositiveClick(item.id!)">
						<template #trigger>
							<n-button strong type="error" @click.stop="()=>{}" circle secondary class="catd-btn-remove">
								<template #icon>
									<svg-icon icon="material-symbols:delete-outline-sharp"></svg-icon>
								</template>
							</n-button>
						</template>
						是否确定删除当前数据！
					</n-popconfirm>
					<n-popconfirm @positive-click="() => handleCopyClick(item.id!)">
						<template #trigger>
							<n-button strong type="warning" @click.stop="()=>{}" circle secondary class="catd-btn-copy">
								<template #icon>
									<svg-icon icon="material-symbols:copy-all-rounded"></svg-icon>
								</template>
							</n-button>
						</template>
						是否确定拷贝当前数据！
					</n-popconfirm>
				</n-card>
			</n-space>
		</loading-empty-wrapper>
	</div>
	<n-modal v-model:show="showModal" title="操作" display-directive="if" :bordered="false" preset="card" class="w-auto"
		size="huge" :closable="false" :mask-closable="false">
		<slef-form :formData="formData" :itemIndex = "activeItem" @close="handleCloseModal" @list="getList"></slef-form>
	</n-modal>
</template>

<script  setup lang='tsx' >
import { onMounted, ref } from 'vue';
import { featchTemplateGroup, featchTemplateGroupPage,featchRemoveTemplateGroup,featchCopyTemplateGroup } from "@/service/api/templateManage/index"
import slefForm from "./form.vue"
import { GenGroup, buildGroup } from './index';
import { usePageList } from '@/hooks';

type DataSource = GenGroup
const {
	loading,
	empty,
	list,
	getList,
	handleQuery
} = usePageList<DataSource>(
	null,
	featchTemplateGroupPage,
	undefined,
	undefined
);

const formData = ref()
const showModal = ref<boolean>(false)
const activeItem = ref<number>(0)
const handleCloseModal = function () {
	showModal.value = false;
	activeItem.value = 0
}
const handleAddGroup = () => {
	showModal.value = true;
	formData.value = buildGroup()
}
const handleEditGroup = async (id: Common.IdType,itemIndex:number = 0) => {
	const { data, error } = await featchTemplateGroup(id)
	if (!error) {
		formData.value = data
		activeItem.value = itemIndex
		showModal.value = true
	}


}
async function handlePositiveClick(id: Common.IdType) {
	const {error} = await featchRemoveTemplateGroup(id);
	if(!error){
		window.$message?.success("操作成功")
	}
	getList()
	return true;
}
async function handleCopyClick(id: Common.IdType) {
	const {error} = await featchCopyTemplateGroup(id);
	if(!error){
		window.$message?.success("操作成功")
	}
	getList()
	return true;
}

onMounted(async () => {
	await getList()
})

</script>

<style lang='scss' scoped>
.card-item {
	width: 400px;
	min-height: 250px;
	margin: 1rem;
	cursor: pointer;
	border-radius: .5rem;
}
.card-item-tag{
	opacity: .7;
	cursor: pointer;
}
.card-item-tag:hover{
	opacity: 1;
}
.catd-btn-remove {
	position: absolute;
	top: 1rem;
	right: .5rem;
}
.catd-btn-copy{
	position: absolute;
	top: 1rem;
	right: 3rem;
}
</style>
